<script setup>
import { reactive, ref } from 'vue'
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import Form from '@/components/Form/Form.vue'
import FormItem from '@/components/Form/FormItem.vue'
import Input from '@/components/Input/Input.vue'
import Button from '@/components/Button/Button.vue'
// const formRef = ref()
const model = reactive({
  email: '1234',
  password: '123',
  confirmPwd: '123'
})
const rules = {
  email: [
    { type: 'email', trigger: 'blur' },
    { type: 'string', required: true, trigger: 'input' }
  ],
  password: [
    { type: 'string', required: true, trigger: 'blur', min: 3, max: 5 }
  ],
  confirmPwd: [
    { type: 'string', required: true, trigger: 'blur' },
    {
      validator: (rule, value) => value === model.password,
      trigger: 'blur',
      message: '两个密码必须相同'
    }
  ]
}
const formRef = ref(null)
const submit = async () => {
  try {
    await formRef.value.validate()
    console.log('通过')
  } catch (e) {
    console.log(e)
  }
}
const reset = () => {
  formRef.value.clearValidate()
  formRef.value.resetFields()
}

// const submit = async () => {
//   try {
//     await formRef.value.validate()
//     console.log('passed!')
//   } catch (e) {
//     console.log('the error', e)
//   }
// }
// const reset = () => {
//   formRef.value.resetFields()
// }
</script>

<template>
  <div>
    <Form :model="model" :rules="rules" ref="formRef">
      <FormItem label="email" prop="email">
        <Input v-model="model.email" type="text"></Input>
      </FormItem>
      <FormItem label="password" prop="password">
        <template #label="{ label }">
          <Button>{{ label }}</Button>
        </template>
        <Input type="password" v-model="model.password"></Input>
      </FormItem>
      <FormItem label="confirmPwd" prop="confirmPwd">
        <template #default="{ validate }">
          <Input type="password" v-model="model.confirmPwd" @blur="validate" />
        </template>
      </FormItem>
      <div>
        <Button type="primary" @click.prevent="submit">Submit</Button>
        <Button @click.prevent="reset">Reset</Button>
      </div>
    </Form>
  </div>
</template>

<style></style>
